<template>
    <div class="content">
         <van-sticky>
            <van-nav-bar
                @click-left="$router.back()"
                left-arrow
                title="绑定银行卡"
            ></van-nav-bar>
        </van-sticky>
        <div class="bdyhk" v-if="$route.query.msg==1">
            <p>请填写绑定持卡人的银行卡信息</p>
            <div class="main">
                <van-field
                    v-model="cardName"
                    label="持卡人"
                />
                 <van-field
                    v-model="idNumber"
                    clearable
                    @change="selectIdNumber"
                    label="身份证号"
                    placeholder="请输入持卡人的身份证号"
                />  
                <van-field
                    v-model="cardNumber"
                    clearable
                    label="卡号"
                    maxlength="23"
                >    
                </van-field>
               
                <van-field
                    v-model="phone"
                    clearable
                    label="手机号"
                    placeholder="请输入手机号"
                />
                <van-field
                    v-model="code"
                    center
                    clearable
                    label="手机验证码"
                    placeholder="输入手机验证码"
                    use-button-slot
                >
                    <div v-if="showTime===null" class="codebtn" @click="send" slot="button">
                        获取验证码
                    </div>
                    <div v-else class="codebtn" slot="button">
                        {{showTime}}
                    </div>
                </van-field>
            </div>
            <div class="contents-btn" @click="save">
                保存
            </div>
        </div>
        <div class="yhkmsg" v-if="$route.query.msg==2">
            <div class="yhkmsg-item">
                <div class="yhkm" v-if="cardmsg.length!=0">
                    <img :src="cardmsg[0].logo" alt="">
                    <p>{{cardmsg[0].bankName}}</p>
                    <span>{{this.cardmsg[0].cardNum.replace( /^(\d{4})\d+(\d{4})$/, "$1 **** **** $2")}}</span>
                </div>
            </div>
             <div class="contents-btn" @click="jiebangyhk()">
                解绑
            </div>
        </div>
    </div>
</template>
<script>
import { request } from '../../request/request';
import {isIdentityId} from '../../plugins/idnumber'
import { Dialog } from 'vant';
export default {
    data(){
        return{
            cardName:"",
            cardNumber:"",
            phone:"",
            code:"",
            idNumber:"",
            showTime:null,
            // 计时器,注意需要进行销毁
            timeCounter: null,
            bangding:false,//使用v-show判断是否绑定银行卡
            cardmsg:[],
            pay:""
        }
    },
    watch:{
        ['cardNumber'](val) {
            this.$nextTick(() => {
                this.cardNumber = val.replace(/\s/g,'').replace(/....(?!$)/g,'$& ');
            });
        }
    },
    mounted(){
        if(this.bangding==false){
            this.getcardMsg();
        }
    },
    methods:{
        // 获取银行卡信息
        getcardMsg(){
            this.$api.getCardMsg({customerId:this.$store.state.userInfo.id}).then(res=>{
                this.cardmsg=res.data
                this.pay=res.pay
            })
        },
        // 保存银行卡信息
        save(){
            if(this.cardName==""){
                this.$toast("请输入持卡人姓名")
                return;
            }else if(this.idNumber==""){
                if(isIdentityId(this.idNumber)){
                    this.$toast(isIdentityId(this.idNumber))
                    return;
                }
            }else if(this.cardNumber==""){
                this.$toast("请输入银行卡号");
                return;
            }else if(this.phone==""){
                this.send();
                return;
            }else if(this.code==""){
                this.$toast("请输入验证码")
                return;
            }
            
            let obj={
              acctName:this.cardName,
              acctPan:this.cardNumber.replace(/\s*/g,''),
              certId:this.idNumber,
              phone:this.phone,
              code:this.code,
              customerId:this.$store.state.userInfo.id
            }
            this.$api.getCardtype(obj).then((res)=>{
                if(res.code==0){
                    this.$toast("绑定成功")
                    this.$router.push("/personal")
                }else{
                    this.$toast(res.message)
                }
            })
        },
        // 身份证校验
        selectIdNumber(e){
            if(isIdentityId(e.target.value)){
                this.$toast(isIdentityId(e.target.value))
                return;
            }
        },
        // 解绑按钮
        jiebangyhk(){
            if(this.pay=="F"){
                 Dialog.confirm({
                    title: '提示',
                    message: '您还没有设置支付密码，请设置后在解绑',
                }).then(() => {
                    this.$router.push("/settingpayPassword")
                }).catch(() => {
                   return
                });
            }else{
                this.$router.push("/paymentcode")
            }
        },
        // 倒计时显示处理
        countDownText(s) {
            this.showTime = `${s}s后重新获取`
        },
        // 倒计时 60秒 不需要很精准
        countDown(times) {
        const self = this;
        // 时间间隔 1秒
        const interval = 1000;
        let count = 0;
        self.timeCounter = setTimeout(countDownStart, interval);
        function countDownStart() {
            if (self.timeCounter == null) {
            return false;
            }
            count++
            self.countDownText(times - count + 1);
            if (count > times) {
            clearTimeout(self.timeCounter)
            self.showTime = null;
            } else {
            self.timeCounter = setTimeout(countDownStart, interval)
            }
        }
        },
        send() {
            if(this.phone==""){
                this.$toast("请输入手机号");
                return;
            }else{
                this.countDown(60);
                this.$api.getCode({phone:this.phone}).then(res=>{
                    if(res.code==0){
                        this.$toast("验证码发送成功，请查收！")
                    }else{
                        this.$toast("请重新发送")
                    }
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
.content{
    width:100%;
    height: 100vh;
    background-color: #fff;
    p{
        font-size: 14px;
        text-align: center;
        margin-top: 20px;
    }
    .main{
        margin-top: 20px;
        background-color: #fff;
        .codebtn{
            width: 100px;
            height: 30px;
            opacity: 1;
            border: 1px solid #0264d1;
            border-radius: 25px;
            text-align: center;
            line-height: 30px;
            color:#0264D1;
        }
    }
    .contents-btn{
        width: 80%;
        height: 40px;
        opacity: 1;
        background: #477FE6;
        border-radius: 41px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        margin: 200px auto;
    }
    .imgs{
        img{
            width: 20px;
            height: 20px;
        }
    }
}
.yhkmsg-item{
    .yhkm{
        text-align: center;
        line-height: 30px;
        margin-top: 60px;
        img{
            width: 50px;
            height: 50px;
            margin-top: 20px;
        }
        p{
            margin-top: -5px;
        }
    }
    .yhk{
        margin:0 auto;
        width: 90%;
        height: 109px;
        background: #f3f5f7;
        border-radius: 10px;
        .yhk-item{
            width: 100%;
            height: 25px;
            opacity: 1;
            background: #e6e6e6;
            border-radius: 10px 10px 0px 0px;
            p{
                text-align: left;
                margin-left:10px;
            }
            .yhk-items{
                display: flex;
                justify-content: space-between;
                p{
                    margin-left: 10px;
                }
                span{
                    margin-top: 15px;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>